<!-- 
 * 文件名称: index.html
 * 功能描述: 程序员之家技术组主页面
 * 包含模块: 
 *   - 网站标题和Logo
 *   - 轮播图展示
 *   - 自适应搜索框
 *   - 导航菜单
 *   - 鸟瞰图功能
 *   - 备案信息
 * 作者: 龙炜轩
 * 创建时间: 2025.7.22
 * 最后修改: 2025.7.22
 * 版本: 1.2.0
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 基础元数据 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="广东科学技术职业学院程序员之家 - 提供AI搜索、编程学习、数学建模、算法可视化等技术资源，助力广科学子技术成长">
    <meta name="keywords" content="程序员之家, 广科程序员, 广东科学技术职业学院, 编程学习, AI搜索, 数学建模, 算法可视化, 代码编辑器, 技术学习平台, 广科系统跳转, 编程竞赛, 学习路径推荐">
    <meta name="author" content="龙炜轩">
    <meta name="robots" content="index, follow">
    <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
    <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://your-domain.com/">
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="GK程序员之家 - 广科学子的技术学习平台">
    <meta property="og:description" content="广东科学技术职业学院程序员之家提供AI搜索、编程学习、数学建模等技术资源，助力广科学子技术成长">
    <meta property="og:image" content="./img/程协logo.png">
    <meta property="og:url" content="https://your-domain.com/">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="GK程序员之家">
    <meta property="og:locale" content="zh_CN">


    
    <!-- 页面标题 -->
    <title>GK程序员之家 - 广科学子技术学习平台</title>
    
    <!-- 样式表 -->
    <link rel="stylesheet" href="style/style1.css">
    
    <!-- SEO优化样式 -->
    <style>
        /* 屏幕阅读器专用内容 */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        
        /* 高对比度模式支持 */
        @media (prefers-contrast: high) {
            .feature-card {
                border: 2px solid currentColor !important;
            }
        }
        
        /* 减少动画偏好支持 */
        @media (prefers-reduced-motion: reduce) {
            .feature-card {
                transition: none !important;
            }
        }
        
        /* 聚焦样式优化 */
        .feature-card:focus-within {
            outline: 3px solid #667eea;
            outline-offset: 2px;
        }
        
        /* 打印样式优化 */
        @media print {
            #birdEyeContainer,
            .bird-eye-toggle {
                display: none !important;
            }
            
            .feature-card {
                break-inside: avoid;
                box-shadow: none !important;
                border: 1px solid #ccc !important;
            }
        }
    </style>
    
    <!-- JavaScript库 -->
    <!-- jQuery库需要在调用前引入 -->
    <script src="js/index.js"></script>
    <script src="js/readResponsibilityStatement.js"></script>
    <div id="app">{{ message }}</div>
    <!-- 导入VUE3 -->
    <script type="module">
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    
    createApp({
        setup() {
        const message = ref('Hello Vue!')

        return {
            message
        }
        }
    }).mount('#app')

    const app2 = createApp({
        setup() {
        // 接受一个从终端上传的参数
        // const text = ref(process.argv.slice(2));
        let text = '项目使用的软件安装包(Trae IDE)传上来'
        const items = ref([
        text,
        '项目2(把项目2的提示词、项目文件传上来)',
        '项目3(把项目3的提示词、项目文件传上来)',
        text
        ])
        return {
            items
        }
        }
    })
    app2.mount('#app2')


    </script>
    <!-- 页面图标 -->
    <link rel="icon" type="image/png" href="img/程协logo.png">
    
    <!-- 结构化数据 - JSON-LD -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": "GK程序员之家",
        "alternateName": "广科程序员之家",
        "url": "https://your-domain.com/",
        "description": "广东科学技术职业学院程序员之家提供AI搜索、编程学习、数学建模、算法可视化等技术资源",
        "publisher": {
            "@type": "Organization",
            "name": "GK程序员之家技术组",
            "logo": {
                "@type": "ImageObject",
                "url": "https://your-domain.com/img/程协logo.png"
            }
        },
        "keywords": ["程序员之家", "广科程序员", "编程学习", "AI搜索", "数学建模", "算法可视化"],
        "inLanguage": "zh-CN",
        "potentialAction": {
            "@type": "SearchAction",
            "target": "https://your-domain.com/search?q={search_term_string}",
            "query-input": "required name=search_term_string"
        },
        "mainEntity": {
            "@type": "Organization",
            "name": "广东科学技术职业学院程序员之家",
            "description": "为广科学子提供技术学习和交流的平台",
            "member": {
                "@type": "OrganizationRole",
                "roleName": "技术组"
            }
        }
    }
    </script>
    
    <!-- 教育平台结构化数据 -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "EducationalOrganization",
        "name": "GK程序员之家",
        "description": "广东科学技术职业学院学生技术学习平台",
        "url": "https://your-domain.com/",
        "address": {
            "@type": "PostalAddress",
            "addressLocality": "珠海",
            "addressRegion": "广东",
            "addressCountry": "CN"
        },
        "offers": [
            {
                "@type": "Course",
                "name": "编程学习资源",
                "description": "提供编程学习资料和实践项目"
            },
            {
                "@type": "Course",
                "name": "数学建模指导",
                "description": "数学建模竞赛指导和模板分享"
            },
            {
                "@type": "Course",
                "name": "算法可视化",
                "description": "算法学习可视化工具"
            }
        ]
    }
    </script>
</head>

    <!-- 
     * 自适应搜索框
     * 功能: 提供智能搜索功能
     * 特性: 
     *   - 实时搜索建议
     *   - 支持多种搜索源（百度、Bing、公众号）
     *   - 响应式设计
    -->

    <main role="main">
    <section class="search-section" aria-labelledby="search-title">
    <div class="search-container">
        <div class="logo-container">
            <img src="./img/神奇的搜索.png" alt="程协Logo" class="logo">
        </div>
        <!-- ---------------------------------------------------- -->
        <h1 id="search-title" class="search-title">GK程协搜索助手</h1>
        <div class="search-wrapper">
            <input type="text" id="searchInput" 
                   placeholder="搜索你在广科想知道的任何东西，比如：数学建模、软件、工具、学习网站等"
                   aria-label="搜索输入框"
                   autocomplete="off"
                   autocorrect="off"
                   spellcheck="false"
                   name="search"
                   title="搜索广科技术资源">
            <button id="searchButton" type="submit" aria-label="搜索按钮" title="开始搜索">
                <span class="search-icon" aria-hidden="true">🔍</span>
                <span class="search-text">搜索</span>
            </button>
        </div>
        <div class="search-suggestions" id="searchSuggestions" role="listbox"></div>
    </div>
    </section>

    <a href="1\index.html">点击切换</a>
    <br>
    <hr>
        
    <section class="features-section" aria-labelledby="features-title">
        <h2 id="features-title" class="sr-only">平台功能特性</h2>
        
        <!-- 已完成功能开发 -->
        <article class="feature-card completed" role="article" aria-labelledby="ai-search-title" style="
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 30px;
            margin: 20px auto;
            border-radius: 15px;
            max-width: 800px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        " onmouseover="this.style.transform='translateY(-5px)'" 
           onmouseout="this.style.transform='translateY(0)'">
            <h3 id="ai-search-title" style="font-size: 24px; margin-bottom: 15px;">
                🤖 AI搜索
            </h3>
            <p style="font-size: 16px; line-height: 1.6; opacity: 0.9;">
                集成百度搜索、bing搜索、秘塔AI搜索（debug中）
            </p>
            <div style="margin-top: 20px;">
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px;">
                    开发阶段: 基本完成，待改良
                </span>
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px; margin-left: 10px;">
                    始于: 2025-7-10 22:09
                </span>
            </div>
        </article>

        <!-- 新增：搜索引擎技巧XML版 -->
        <article class="feature-card xml-version" style="
            background: linear-gradient(135deg, #36d1dc, #5b86e5);
            color: white;
            padding: 30px;
            margin: 20px auto;
            border-radius: 15px;
            max-width: 800px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
            cursor: pointer;
        " onmouseover="this.style.transform='translateY(-5px)'" 
           onmouseout="this.style.transform='translateY(0)'"
           onclick="window.location.href='search-tips-xml.html'">
            <h3 style="font-size: 24px; margin-bottom: 15px;">
                📊 搜索引擎技巧版
            </h3>
            <p style="font-size: 16px; line-height: 1.6; opacity: 0.9;">
                以XML格式展示的搜索引擎技巧指南，便于浏览器解析和程序调用
            </p>
            <div style="margin-top: 20px;">
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px;">
                    状态: 已完成
                </span>
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px; margin-left: 10px;">
                    XML格式
                </span>
            </div>
        </article>

    <!-- 
     * 待开发功能列表
     * 功能: 展示未来计划开发的功能，用于测试长页面效果
     * 结构: 10个功能模块，每个包含详细描述和状态
     * 目的: 为鸟瞰图提供足够的页面长度进行测试
    -->
    <section id="future-features" aria-labelledby="future-features-title">
        <h2 id="future-features-title" style="color: #667eea; text-align: center; margin: 40px 0;">
            🚀 未来功能开发计划
        </h2>
            <!-- v-for渲染一个列表 -->
        <div id="app2">
            <li v-for="item in items"  >
                {{item}}
            </li>    
        <div>

        <!-- 功能1: AI代码助手 -->
        <div class="feature-card" style="
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 30px;
            margin: 20px auto;
            border-radius: 15px;
            max-width: 800px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        " onmouseover="this.style.transform=\'translateY(-5px)\'" 
           onmouseout="this.style.transform=\'translateY(0)\'">
            <h3 style="font-size: 24px; margin-bottom: 15px;">
                🤖 AI代码助手集成
            </h3>
            <p style="font-size: 16px; line-height: 1.6; opacity: 0.9;">
                集成OpenAI GPT-4和Claude 3.5，提供实时代码审查、优化建议和bug检测。
                支持多种编程语言，包括Python、JavaScript、C++等。
            </p>
            <div style="margin-top: 20px;">
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px;">
                    开发阶段: 需求分析
                </span>
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px; margin-left: 10px;">
                    预计完成: 2025-Q3
                </span>
            </div>
        </div>

        <!-- 功能2: 数学建模模板库 -->
        <div class="feature-card" style="
            background: linear-gradient(135deg, #f093fb, #f5576c);
            color: white;
            padding: 30px;
            margin: 20px auto;
            border-radius: 15px;
            max-width: 800px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        " onmouseover="this.style.transform=\'translateY(-5px)\'" 
           onmouseout="this.style.transform=\'translateY(0)\'">
            <h3 style="font-size: 24px; margin-bottom: 15px;">
                📊 数学建模模板库
            </h3>
            <p style="font-size: 16px; line-height: 1.6; opacity: 0.9;">
                收集整理各类数学建模竞赛的优秀模板，包括国赛、美赛、华为杯等。
                提供可下载的Word、LaTeX模板和代码示例。
            </p>
            <div style="margin-top: 20px;">
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px;">
                    开发阶段: 数据收集
                </span>
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px; margin-left: 10px;">
                    预计完成: 2025-Q2
                </span>
            </div>
        </div>

        <!-- 功能3: 在线代码编辑器 -->
        <div class="feature-card" style="
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            color: white;
            padding: 30px;
            margin: 20px auto;
            border-radius: 15px;
            max-width: 800px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        " onmouseover="this.style.transform=\'translateY(-5px)\'" 
           onmouseout="this.style.transform=\'translateY(0)\'">
            <h3 style="font-size: 24px; margin-bottom: 15px;">
                💻 在线代码编辑器
            </h3>
            <p style="font-size: 16px; line-height: 1.6; opacity: 0.9;">
                基于Monaco Editor的在线代码编辑环境，支持语法高亮、智能提示、
                实时运行和调试功能。集成Python、JavaScript、C++运行环境。
            </p>
            <div style="margin-top: 20px;">
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px;">
                    开发阶段: 技术选型
                </span>
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px; margin-left: 10px;">
                    预计完成: 2025-Q3
                </span>
            </div>
        </div>

        <!-- 功能4: 学习路径推荐系统 -->
        <div class="feature-card" style="
            background: linear-gradient(135deg, #fa709a, #fee140);
            color: white;
            padding: 30px;
            margin: 20px auto;
            border-radius: 15px;
            max-width: 800px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        " onmouseover="this.style.transform=\'translateY(-5px)\'" 
           onmouseout="this.style.transform=\'translateY(0)\'">
            <h3 style="font-size: 24px; margin-bottom: 15px;">
                🎯 学习路径推荐系统
            </h3>
            <p style="font-size: 16px; line-height: 1.6; opacity: 0.9;">
                基于用户技能水平和学习目标，智能推荐个性化的学习路径。
                包含前端、后端、算法、数学建模等多个方向的进阶路线。
            </p>
            <div style="margin-top: 20px;">
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px;">
                    开发阶段: 算法设计
                </span>
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px; margin-left: 10px;">
                    预计完成: 2025-Q4
                </span>
            </div>
        </div>

        <!-- 功能5: 项目协作平台 -->
        <div class="feature-card" style="
            background: linear-gradient(135deg, #a8edea, #fed6e3);
            color: #333;
            padding: 30px;
            margin: 20px auto;
            border-radius: 15px;
            max-width: 800px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        " onmouseover="this.style.transform=\'translateY(-5px)\'" 
           onmouseout="this.style.transform=\'translateY(0)\'">
            <h3 style="font-size: 24px; margin-bottom: 15px;">
                🤝 项目协作平台
            </h3>
            <p style="font-size: 16px; line-height: 1.6; opacity: 0.9;">
                为学生团队提供项目协作工具，包括任务分配、进度跟踪、代码审查、
                文档协作等功能。支持GitHub、GitLab集成。
            </p>
            <div style="margin-top: 20px;">
                <span style="background: rgba(0,0,0,0.1); padding: 5px 15px; border-radius: 20px; font-size: 12px;">
                    开发阶段: 架构设计
                </span>
                <span style="background: rgba(0,0,0,0.1); padding: 5px 15px; border-radius: 20px; font-size: 12px; margin-left: 10px;">
                    预计完成: 2025-Q4
                </span>
            </div>
        </div>

        <!-- 功能6: 算法可视化工具 -->
        <div class="feature-card" style="
            background: linear-gradient(135deg, #ffecd2, #fcb69f);
            color: #333;
            padding: 30px;
            margin: 20px auto;
            border-radius: 15px;
            max-width: 800px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        " onmouseover="this.style.transform=\'translateY(-5px)\'" 
           onmouseout="this.style.transform=\'translateY(0)\'">
            <h3 style="font-size: 24px; margin-bottom: 15px;">
                🔍 算法可视化工具
            </h3>
            <p style="font-size: 16px; line-height: 1.6; opacity: 0.9;">
                将复杂算法通过动画和交互式图表进行可视化展示，包括排序算法、
                图算法、动态规划等。支持自定义输入和逐步执行。
            </p>
            <div style="margin-top: 20px;">
                <span style="background: rgba(0,0,0,0.1); padding: 5px 15px; border-radius: 20px; font-size: 12px;">
                    开发阶段: 原型开发
                </span>
                <span style="background: rgba(0,0,0,0.1); padding: 5px 15px; border-radius: 20px; font-size: 12px; margin-left: 10px;">
                    预计完成: 2025-Q3
                </span>
            </div>
        </div>

        <!-- 功能7: 技术文章聚合器 -->
        <div class="feature-card" style="
            background: linear-gradient(135deg, #d299c2, #fef9d7);
            color: #333;
            padding: 30px;
            margin: 20px auto;
            border-radius: 15px;
            max-width: 800px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        " onmouseover="this.style.transform=\'translateY(-5px)\'" 
           onmouseout="this.style.transform=\'translateY(0)\'">
            <h3 style="font-size: 24px; margin-bottom: 15px;">
                📰 技术文章聚合器
            </h3>
            <p style="font-size: 16px; line-height: 1.6; opacity: 0.9;">
                自动收集整理来自Medium、Dev.to、GitHub、知乎等平台的技术文章，
                按主题分类，提供个性化推荐和离线阅读功能。
            </p>
            <div style="margin-top: 20px;">
                <span style="background: rgba(0,0,0,0.1); padding: 5px 15px; border-radius: 20px; font-size: 12px;">
                    开发阶段: API集成
                </span>
                <span style="background: rgba(0,0,0,0.1); padding: 5px 15px; border-radius: 20px; font-size: 12px; margin-left: 10px;">
                    预计完成: 2025-Q2
                </span>
            </div>
        </div>
        

        <!-- 功能8: 竞赛报名提醒系统 -->
        <div class="feature-card" style="
            background: linear-gradient(135deg, #89f7fe, #66a6ff);
            color: white;
            padding: 30px;
            margin: 20px auto;
            border-radius: 15px;
            max-width: 800px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        " onmouseover="this.style.transform=\'translateY(-5px)\'" 
           onmouseout="this.style.transform=\'translateY(0)\'">
            <h3 style="font-size: 24px; margin-bottom: 15px;">
                🏆 竞赛报名提醒系统
            </h3>
            <p style="font-size: 16px; line-height: 1.6; opacity: 0.9;">
                自动跟踪各类编程竞赛、数学建模竞赛的报名时间，通过邮件和站内消息
                提醒用户。包括蓝桥杯、ACM、华为杯、美赛等。
            </p>
            <div style="margin-top: 20px;">
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px;">
                    开发阶段: 数据源整理
                </span>
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px; margin-left: 10px;">
                    预计完成: 2025-Q2
                </span>
            </div>
        </div>

        <!-- 功能9: 学习进度追踪 -->
        <div class="feature-card" style="
            background: linear-gradient(135deg, #ff9a9e, #fecfef);
            color: #333;
            padding: 30px;
            margin: 20px auto;
            border-radius: 15px;
            max-width: 800px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        " onmouseover="this.style.transform=\'translateY(-5px)\'" 
           onmouseout="this.style.transform=\'translateY(0)\'">
            <h3 style="font-size: 24px; margin-bottom: 15px;">
                📊 学习进度追踪
            </h3>
            <p style="font-size: 16px; line-height: 1.6; opacity: 0.9;">
                记录用户的学习轨迹，生成可视化的学习进度报告，包括学习时间、
                掌握程度、薄弱环节分析等，支持设置学习目标和提醒。
            </p>
            <div style="margin-top: 20px;">
                <span style="background: rgba(0,0,0,0.1); padding: 5px 15px; border-radius: 20px; font-size: 12px;">
                    开发阶段: 需求调研
                </span>
                <span style="background: rgba(0,0,0,0.1); padding: 5px 15px; border-radius: 20px; font-size: 12px; margin-left: 10px;">
                    预计完成: 2025-Q3
                </span>
            </div>
        </div>

        <!-- 功能10: 社区问答系统 -->
        <div class="feature-card" style="
            background: linear-gradient(135deg, #a8caba, #5d4e75);
            color: white;
            padding: 30px;
            margin: 20px auto;
            border-radius: 15px;
            max-width: 800px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        " onmouseover="this.style.transform='translateY(-5px)'" 
           onmouseout="this.style.transform='translateY(0)'">
            <h3 style="font-size: 24px; margin-bottom: 15px;">
                💬 社区问答系统
            </h3>
            <p style="font-size: 16px; line-height: 1.6; opacity: 0.9;">
                建立技术问答社区，支持提问、回答、点赞、采纳等功能。
                集成AI助手进行初步回答，专家用户进行质量审核。
            </p>
            <div style="margin-top: 20px;">
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px;">
                    开发阶段: 系统设计
                </span>
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 12px; margin-left: 10px;">
                    预计完成: 2025-Q4
                </span>
            </div>
        </div>

    </section>
    </main>

    <br>
    <hr>

    <br>
    <hr>

    <!-- 
     * 备案信息
     * 功能: 显示网站备案信息
     * 要求: 必须显示在页面底部
    -->
    <footer id="beian" role="contentinfo">
        <p>
            <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" aria-label="工业和信息化部备案信息">
                粤ICP备2025447309号-1
            </a>
        </p>
        <p>&copy; 2025 GK程序员之家技术组 - 广东科学技术职业学院</p>
    </footer>
    
</body>
</html>